<template>
  <div id="chat">
    <div class="sideBar">
      <SideBarHeader />
      <div class="sideBar__body">
        <SideBar
          v-for="(message, index) in indexes"
          :key="index"
          :active-message="index == activeIndex"
          :user-photo="message.image"
          :user-name="message.user"
          :last-message="message.messages[0].content"
          :last-message-time="message.messages[0].time"
          @click.native="activeIndex = index"
        />
      </div>
    </div>
    <div class="messageView">
      <div class="messageView__header">
        <div class="messageView__user">
          <img :src="indexes[activeIndex].image" alt="">
          <span>{{ indexes[activeIndex].user }}</span>
        </div>
        <div class="messageView__headerIcons">
          <font-awesome-icon class="messageView__headerIcon" icon="fa-solid fa-magnifying-glass" />
          <font-awesome-icon class="messageView__headerIcon" icon="fa-solid fa-ellipsis-vertical" />
        </div>
      </div>
      <div class="messageView__body">
        <MessageViewBody
          v-for="(message, index_) in indexes[activeIndex].messages"
          :key="index_"
          :content="message.content"
          :time="message.time"
          :send="message.send"
        />
      </div>
      <div class="messageView__footer">
        <div class="messageView__footerIcons">
          <font-awesome-icon class="messageView__footerIcon" icon="fa-solid fa-face-laugh-beam" />
          <font-awesome-icon class="messageView__footerIcon" icon="fa-solid fa-paperclip" />
        </div>
        <div class="messageView__input">
          <input v-model="contentSend" type="text" placeholder="Try a message" @keyup.enter="sendMessage">
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import SideBarHeader from '../../components/WsChat/sideBarHeader.vue'
import SideBar from '../../components/WsChat/sideBar.vue'
import messagesIndexes from '../../assets/js/messages'
import MessageViewBody from '../../components/WsChat/messageViewBody.vue'
export default {
  name: 'App',
  components: {
    SideBarHeader,
    SideBar,
    MessageViewBody
  },
  data: function() {
    return {
      indexes: messagesIndexes,
      activeIndex: 0,
      contentSend: ''
    }
  },
  methods: {
    sendMessage: function() {
      const presentTime = new Date().getHours() + ':' + new Date().getMinutes()

      const newMessage = {
        time: presentTime,
        content: this.contentSend,
        send: true
      }

      this.indexes[this.activeIndex]
        .messages
        .push(newMessage)

      this.contentSend = ''
    }
  }
}
</script>

<style>
@import '../../assets/css/sideBar.css';
@import '../../assets/css/messageView.css';

#chat {
  display: flex;
  padding: 10px 10px;
  background-color: #f0f2f5;
}

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: #111B21;
}

::-webkit-scrollbar-thumb {
  background: #202C33;
}

.active{
  background-color: #e0e1e488;
}
</style>
